[iOS 11] はじめてのARKit #WWDC2017

1 はじめに

iOS 11では、iPhoneとiPadに AR(augmented reality) を簡単に作成できるARKitというフレームワークが導入されました。

ARKitでは、カメラビューのシーンを分析して水平面を検出したり、カメラセンサーでシーン内の光量を推定し、的確な照明を仮想オブジェクトに適用したりできます。

非常に、高機能なARKitですが、今回は、「はじめての」という事で、まずは、基本的なオブジェクトを理解したいと思います。

本記事は Apple からベータ版として公開されているドキュメントを情報源としています。 そのため、正式版と異なる情報になる可能性があります。ご留意の上、お読みください。

2 各種オブジェクト

表示に関わっている各種のオブジェクトとその関係を簡単に図にしてみました。

(1) sceneView

sceneView:ARSSCNViewは、3D SceneKitのコンテンツでカメラを拡張して、ARエクスペリエンスを表示するビューです。ViewControllerのviewのSubViewsとして配置され、通常、全面で１枚づつ切り替えて使用されます。

ARSSCNViewには、scene:SCNSceneというプロパティが有り、ARオブジェクトは、これに接続されます。

ARSSCNViewは、新しいプロジェクトの作成でAugmented Reality Appを選択すると、予め、ViewControllerに配置されており、IBOutletでsceneViewという名前で接続されているので、これをそのまま利用できます。

class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!

もし、独自に生成するなら、次のようになるでしょう。

self.sceneView = ARSCNView(frame: self.view.frame)
self.view.addSubview(self.sceneView)

(2) node

node:SCNNodeは、シーン上に配置される、球体、直方体、飛行機オブジェクトなど個々の物体です。

nodeは、sceneのプロパティであるrootNodeに子ノードとして管理されます。

let node = SCNNode()
// nodeの形状・表面・位置などの設定をここで行う
scene.rootNode.addChildNode(node)

SCNNodeのプロパティには、その幾何学的形状を表すgeometry、表面を表すmaterial、そして、位置を表す、positionがあります。

(3) geometry 形状

geometry:SCNGeometryは、物体の形状を表します。

形状には、下記のようなものがあります。（参考： SCNParametricGeometry.h）

• SCNPlane 制御可能な幅と高さを持つ矩形
• SCNBox 長方形の箱
• SCNPyramid 四角錐
• SCNSphere 球体
• SCNCylinder 円柱
• SCNCone 円錐
• SCNTube チューブ
• SCNFloor 無限の平面ジオメトリ
• SCNText 押出されたテキストのブロック

次のコードは、一辺20cmの四角い物体のノードを生成しています。

let node = SCNNode()

let box = SCNBox(width: 0.2, height: 0.2, length: 0.2, chamferRadius: 0)
node.geometry = box

(4)material 表面

material:SCNMaterialは、物体の表面を表します。

次のコードは、ノードの表面を赤色にしています。

let material = SCNMaterial()
material.diffuse.contents = UIColor.red
node.geometry?.materials = [material]

そして、レンガの画像をテクスチャとして張るコードは、こんな感じです。

let brickImage = UIImage(named: "brick")
let material = SCNMaterial()
material.diffuse.contents = brickImage
node.geometry?.materials = [material]

brick.png

(5) position 位置

position:SCNVector3を使用して、空間上の座標を３点(x,y,z)で指定します。

下記のコードは、左右及び、上下中心で、50cm前方（画面上では奥の方向）にノードを配置しています。 ちょうど、画面の中央前方にNodeが見えます。

node.position = SCNVector3(0, 0, -0.5)

3 Pokémon GO

下記は、WWDC2017で紹介されていた、Pokémon GOの画面です。ここまで見てきたオブジェクトをイメージして眺めてみると・・・

カメラの映像の上にオブジェクトを配置するため、全画面でsceneView:ARSCNViewが置かれており、ピカチューやモンスターボールは、それぞれノード　node:SCNNodeです。

ピカチューNodeは、モデリングされた３Dオブジェクトで、モンスターボールは球体オブジェクトでしょうか。それぞれ、materialにテクスチャーが指定されているはずです。

Introducing ARKit: Augmented Reality for iOS (WWDC 2017 - Session 602)より

4 最後に

初めてのARKitという事で、まずは、基本となるオブジェクトを簡単に把握してみました。色々な物体を置いてみると、案外素直に理解できそうです。

一昔前に、非常に苦労したテクスチャの貼り付けが、何も考えなくても、あっさり出来てしまった事に、個人的には感動してしまいました。（古い？）

5 参考リンク

Introducing ARKit
Apple Developer > Documentation > ARKit
WWDC2017 Session 602 Introducing ARKit: Augmented Reality for iOS